<template>
	<div
		class="base-toggle h-[36px] rounded-lg inline-flex justify-center items-center transition-all duration-300 app-bg-react"
		:class="[
			checked ? 'bg-primary text-white' : 'bg-bg-3 text-t-2',
			paddingClass,
			showText ? '' : 'w-[36px]'
		]"
		@click="onClick">
		<base-icon v-if="icon" :name="icon" class="text-[20px]"></base-icon>
		<base-text
			:class="icon ? 'ml-1 whitespace-nowrap' : ''"
			v-show="showText || checked || !icon"
			:text="text"
			:textT="textT"></base-text>
	</div>
</template>

<script lang="ts" setup>
import BaseIcon from '../icon/index.vue'
import BaseText from '../text/index.vue'
import { computed } from 'vue'

const props = defineProps({
	checked: {
		type: Boolean,
		default: false
	},
	icon: {
		type: String,
		default: ''
	},
	text: {
		type: String,
		default: ''
	},
	textT: {
		type: [String, Array],
		default: ''
	},
	isM: {
		type: Boolean,
		default: false
	},
	showText: {
		type: Boolean,
		default: false
	}
})

const paddingClass = computed(() => {
	if (props.checked) {
		return 'px-2'
	} else if (!props.icon) {
		return 'px-3'
	} else if (!props.text && !props.textT) {
		return 'px-2'
	} else if (props.isM) {
		return 'px-1'
	} else {
		return 'px-2'
	}
})

const emits = defineEmits(['change'])

const onClick = () => emits('change', !props.checked)
</script>
